+<template>
  <div class="shoppingDetails">
    <!-- product img -->
    <el-row :span="24" class="productImg">
      <img class="userimg" src="../../assets/imgs/pdetail1.png" alt="">
      <img class="userimg" src="../../assets/imgs/p2.jpg" alt="">
      <img class="userimg" src="../../assets/imgs/p1.jpg" alt="">
      <img class="userimg" src="../../assets/imgs/pdetail4.png" alt="">
      <img class="userimg" src="../../assets/imgs/pdetail5.png" alt="">
      <img class="userimg" src="../../assets/imgs/pdetail6.png" alt="">
    </el-row>
    <!-- product description -->
    <!-- <el-row :span="24" class="productDesc">
      <span class="title">{{ product.productName }}</span>
      <span>·</span>
      <span class="desc">{{ product.productInfo }}</span>
    </el-row> -->
    <!-- product details -->
    <!-- <el-row :span="24" class="productDetails">
      <div class="title">产品详情</div>
      <div class="content">
        产品介绍用的图片
      </div>
    </el-row> -->
    <!-- product footer -->
    <el-row :span="24" class="productFooter">
      <footer-purchase :product-info="product"></footer-purchase>
    </el-row>
  </div>
</template>

<script type="text/ecmascript-6">
import footerPurchase from '../common/footerPurchase'
export default {
  components: { footerPurchase },
  data () {
    return {
      product: {
        productID: '0100010010',
        createTime: 1512393772000,
        updateTime: 1512393772000,
        id: 7,
        productName: '恒之源',
        productPrice: '',
        productInfo: '很好的产品',
        status: 1
      }
    }
  },
  methods: {

  },
  created () {
    if (!this.$store.state.user.level) {
      this.$message({
        message: '您不是代理商不能进行商城采购',
        type: 'error',
        duration: 2000,
        showClose: false
      })
      this.$router.push('/home')
    }
      //  获取产品信息
    this.$http.post('http://218.104.153.143:8089/numberone-auth/busiProduct/getMarkProduct.shtml', { token: this.$store.state.token }, {
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
      emulateJSON: true
    }).then((data) => {
      this.product.productPrice = data.body.productInfo.productPrice
      this.$store.dispatch('setPrice', data.body.productInfo.productPrice)
    }, (ne) => {
      this.$message({
        message: '网络错误',
        type: 'error',
        duration: 1000,
        showClose: false
      })
    })
  },
  mounted () {
    this.$store.dispatch('setPrice', this.product.productPrice)
  }
}
</script>

<style lang="scss" type="stylesheet/scss">
.shoppingDetails {
  .productImg {
    // height: 300px;
    background-color: #eee;
    img{
      width:100%;
    }
  }
  .productDesc {
    background-color: #fff;
    text-align: left;
    text-indent: 20px;
    line-height: 20px;
    font-size: 14px;
    padding: 10px;
    .title {
      font-weight: 600;
      color: green;
    }
  }
  .productDetails {
    .title {
      height: 50px;
      line-height: 50px;
      background-color: green;
      color: #fff;
      text-align: left;
      text-indent: 20px;
    }
    .content {
      height: 300px;
      background-color: #eee;
    }
  }
}
</style>
